<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="request m1280">Request</div>
		<!-- 3 results  -->
		<div class="results m1280">{{ total }} results</div>
		<!-- Nathan Sudds -->
		<div v-for="(item, index) in list" :key="index" class="sudds m1280 f f-j-b">
			<div class="leftImg">
				<div class="avaImg f f-a-c">
					<img :src="item.requestRespVO.buyerAvatar" alt="" />
					<div class="userName">{{ item.requestRespVO.buyerFirstName || "--" }} {{ item.requestRespVO.buyerLastName }}</div>
				</div>
				<div class="queries">{{ item.requestRespVO.descriptionTitle }}</div>
				<div class="count">{{ item.requestRespVO.descriptionDetail }}</div>
				<div class="tops f f-a-c">
					<div class="topics">Topics：</div>
					<div v-for="(ite, ind) in item.requestRespVO.topicNames" :key="ind" class="topicsBox hand">{{ ite }}</div>
					<!-- <div class="topicsBox hand">Tech</div>
					<div class="topicsBox hand">Programming</div> -->
				</div>
				<!-- 2 applications -->
				<div class="applications f f-a-c">
					<div class="applicationsLef f f-a-c">
						<div class="img f f-a-c">
							<img :src="itImg.sellerAvatar" :key="inImg" v-for="(itImg, inImg) in item.requestRespVO.requestApplyRespVOS" class="touImg" alt="" />
							<!-- <img src="/src/assets/tou.png" class="towImg" alt="" /> -->
						</div>
						<div class="m-l-10 rigApp">{{ item.requestRespVO?.requestApplyRespVOS?.length || 0 }} applications</div>
					</div>
					<div class="applicationsRig f f-a-c">
						<!-- <img src="/src/assets/user/time.png" alt="" /> <i>{{ getTimes() }}</i> -->
					</div>
				</div>
			</div>
			<div class="rightBtn">
				<div class="price">Price</div>
				<div class="priceNum">${{ item.priceOffer }}.00</div>
				<div class="price">Estimated duration</div>
				<div class="priceNum">{{ item.requestRespVO.estimatedDuration }} mins</div>
				<div class="btn f f-a-c">
					<div @click="cancel(item)" v-if="item.status == 0" class="lefBtn hand">Cancel</div>
					<div v-if="item.status == 0" @click="editDetils(item)" class="rigBtn hand">Edit</div>
				</div>
			</div>
		</div>
		<div style="margin-bottom: 80px; margin-top: 50px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="6" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<!-- 删除 -->
		<el-dialog v-model="listVisibleDet" title="" width="400">
			<div class="dialogTitleDelete">Cancel order？</div>
			<div class="dialogTitCount">Cancellation will affect your overall rating, are you sure you want to do this?</div>
			<div class="dialogBtn f f-a-c f-j-b">
				<div @click="cancelOrder" class="lefBtn hand">YES</div>
				<div @click="listVisibleDet = false" class="rigBtn hand">NO</div>
			</div>
		</el-dialog>
		<!-- You might interested-->
		<div class="might m1280">
			<div class="interested">You might interested</div>
			<div class="mightBox f f-a-c f-w-w">
				<div v-for="(item, index) in intvlList" @click="godetil(item)" :key="index" class="hand mightItem">
					<div class="top f f-a-c f-j-b">
						<div class="topLeft f f-a-c">
							<img style="object-fit: cover" :src="item.buyerAvatar" alt="" />
							<span>{{ item.buyerFirstName }} {{ item.buyerLastName }}</span>
						</div>
						<div @click.stop="goApply(item)" class="feiBtn hand f f-a-c f-j-c">
							<img src="/src/assets/user/feiji.png" alt="" />
							<span>Apply</span>
						</div>
					</div>
					<div class="count o-f-2">{{ item.descriptionTitle }}</div>
					<div class="cuntNei o-f-2">{{ item.descriptionDetail }}</div>
					<!-- <div class="more">Read more</div> -->
					<div class="tops f f-a-c">
						<div class="topics">Topics：</div>
						<div class="topicsBox hand">Software design</div>
						<div class="topicsBox hand" v-for="(ite, ind) in item.topicNames" :key="ind">{{ ite }}</div>
					</div>
					<div class="botBtn f f-a-c f-j-b">
						<div class="prais f f-a-c">
							<div @click.stop="goHasLike(item)" class="star m-r-10 f f-a-c">
								<img v-if="item.hasLike" src="/src/assets/user/star2.png" alt="" />
								<img v-else src="/src/assets/user/star.png" alt="" />
								<span style="margin-left: 2px">{{ item.likeNum }}</span>
							</div>
							<div class="imgBox">
								<img style="margin-left: -10px; object-fit: cover" v-for="(iteImg, indImg) in item.requestApplyRespVOS" :key="indImg" :src="iteImg.sellerAvatar" alt="" />
								<span>{{ item.requestApplyRespVOS?.length || 0 }} application</span>
							</div>
						</div>
						<div class="time f f-a-c">
							<img src="/src/assets/user/time.png" alt="" />
							<span>{{ getTimes(item.createTime) }}</span>
						</div>
						<div class="time f f-a-c">
							<img src="/src/assets/user/yaun.png" alt="" />
							<span>{{ item.viewNum }} views</span>
						</div>
					</div>
				</div>
			</div>
			<div @click="goMore" class="mores hand">More</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { SellerRequestApplicationList, ChangLive, InterestedRequest, CanelReviselicationList } from "@/api/xpert.js";
	import { ref, onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { getTimes } from "@/utils/setting.js";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let pageNum = ref(1);
	let pageSize = ref(3);
	let list = ref([]);
	let listVisibleDet = ref(false);
	let intvlList = ref([]);
	let objItem = ref({});
	let total = ref(0);
	onMounted(() => {
		myPageRequest();
		interestedRequest();
		window.addEventListener("scroll", handleScroll);
	});
	// 删除
	const cancelOrder = async () => {
		let n = await CanelReviselicationList({
			requestApplyId: objItem.value.id
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			listVisibleDet.value = false;
			myPageRequest();
		}
	};
	// 删除
	const cancel = async item => {
		listVisibleDet.value = true;
		objItem.value = item;
	};
	const myPageRequest = async () => {
		let n = await SellerRequestApplicationList({
			pageNum: pageNum.value,
			pageSize: pageSize.value
		});
		list.value = n.data.list;
		total.value = n.data.total;
	};
	// 感兴趣的request
	const interestedRequest = async () => {
		let n = await InterestedRequest({
			pageNum: 1,
			pageSize: 6
		});
		intvlList.value = n.data.list;
	};
	// 这个是添加喜欢
	const goHasLike = async item => {
		let n = await ChangLive({ id: item.id });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			interestedRequest();
		}
	};
	// 去修改
	const editDetils = item => {
		router.push({
			path: "/Request/RequestApply",
			query: {
				id: item.requestId,
				act: 2,
				listId: item.id
			}
		});
	};
	// 去更多
	const goMore = () => {
		router.push({
			path: "/Request/RequestCommunity"
		});
	};
	const godetil = item => {
		router.push({
			path: "/Request/RequestDetils",
			query: {
				id: item.id
			}
		});
	};
	const goApply = item => {
		router.push({
			path: "/Request/RequestApply",
			query: {
				id: item.id
			}
		});
	};
	const currentChange = num => {
		pageNum.value = num;
		myPageRequest();
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 8px;
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: 20px !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: 20px !important;
	}
</style>
